import React from 'react'
//渲染列表
function ListItem({ item, delListItem }) {
  return (
    <>
      <h3>{item.name}</h3>
      <p>{item.price}</p>
      <p>{item.info}</p>
      <button onClick={() => delListItem(item.id)}>删除</button>
      {/* //子传父 */}
    </>
  )
}

//数据提供者 渲染ListItem组件 App-ListItem
class App extends React.Component {
  state = {
    list: [
      { id: 1, name: '超级好吃的棒棒糖', price: 18.8, info: '开业大酬宾' },
      { id: 2, name: '超级好吃的辣条', price: 30.8, info: '开业大酬宾' },
      { id: 3, name: '超级好吃的薯片', price: 15.8, info: '开业大酬宾' },
    ],
  }

  //给子组件传递
  delListItem = (id) => {
    this.setState({
      list: this.state.list.filter((item) => item.id !== id),
    })
  }
  render() {
    return (
      <div>
        {this.state.list.map((item) => (
          <ListItem
            item={item}
            key={item.id}
            delListItem={this.delListItem}
          ></ListItem>
        ))}
      </div>
    )
  }
}

export default App
